<!--
 * @Author: fanzejie
 * @Description: 请填写简介
-->
<template>
  <div class="test-container">
    <h1>测试循环生成组件</h1>
    <div>
      <div v-for="(chart, index) in chartData" :key="index" class="bigChart">
        <line-chart
          :ref="child"
          :chartTitle="chart.name"
          :chartSeries="chart.series"
        ></line-chart>
      </div>
    </div>
    <h1>测试循环生成省市组件</h1>
    <div style="overflow: auto; height: 400px">
      <div v-for="(province, index) in provinceChartData" :key="index">
        <h2 v-text="province.name"></h2>
        <div
          v-for="(chart, index2) in province.chartData"
          :key="index2"
          class="bigChart"
        >
          <line-chart
            :ref="child"
            :chartTitle="chart.name"
            :chartSeries="chart.series"
          ></line-chart>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import LineChart from "./LineChart.vue";
export default {
  name: "test",
  data() {
    return {
      chartData: [
        {
          //这是一张图
          name: "在线终端趋势图",
          series: [
            {
              name: "当前周期",
              data: [
                [1370131200000, 0.7695],
                [1370217600000, 0.7648],
                [1370224000000, 0.7645],
              ],
            },
            {
              name: "前一天",
              data: [
                [1370131200000, 0.7695],
                [1370217600000, 0.7648],
                [1370224000000, 0.7645],
              ],
            },
            {
              name: "前一周",
              data: [
                [1370131200000, 0.7695],
                [1370217600000, 0.7648],
                [1370224000000, 0.7645],
              ],
            },
            {
              name: "上上周",
              data: [
                [1370131200000, 0.7695],
                [1370217600000, 0.7648],
                [1370224000000, 0.7645],
              ],
            },
          ],
        },
        {
          //这是一张图
          name: "售票活动终端趋势图",
          series: [
            {
              name: "当前周期",
              data: [
                [1370131200000, 0.7695],
                [1370217600000, 0.7648],
                [1370224000000, 0.7645],
              ],
            },
            {
              name: "前一天",
              data: [
                [1370131200000, 0.7695],
                [1370217600000, 0.7648],
                [1370224000000, 0.7645],
              ],
            },
            {
              name: "前一周",
              data: [
                [1370131200000, 0.7695],
                [1370217600000, 0.7648],
                [1370224000000, 0.7645],
              ],
            },
            {
              name: "上上周",
              data: [
                [1370131200000, 0.7695],
                [1370217600000, 0.7648],
                [1370224000000, 0.7645],
              ],
            },
          ],
        },
        {
          //这是一张图
          name: "售票请求趋势图",
          series: [
            {
              name: "当前周期",
              data: [
                [1370131200000, 0.7695],
                [1370217600000, 0.7648],
                [1370224000000, 0.7645],
              ],
            },
            {
              name: "前一天",
              data: [
                [1370131200000, 0.7695],
                [1370217600000, 0.7648],
                [1370224000000, 0.7645],
              ],
            },
            {
              name: "前一周",
              data: [
                [1370131200000, 0.7695],
                [1370217600000, 0.7648],
                [1370224000000, 0.7645],
              ],
            },
            {
              name: "上上周",
              data: [
                [1370131200000, 0.7695],
                [1370217600000, 0.7648],
                [1370224000000, 0.7645],
              ],
            },
          ],
        },
      ],
      provinceChartData: [
        {
          name: "北京",
          chartData: [
            {
              //这是一张图
              name: "在线终端趋势图",
              series: [
                {
                  name: "当前周期",
                  data: [
                    [1370131200000, 0.7695],
                    [1370217600000, 0.7648],
                    [1370224000000, 0.7645],
                  ],
                },
                {
                  name: "前一天",
                  data: [
                    [1370131200000, 0.7695],
                    [1370217600000, 0.7648],
                    [1370224000000, 0.7645],
                  ],
                },
                {
                  name: "前一周",
                  data: [
                    [1370131200000, 0.7695],
                    [1370217600000, 0.7648],
                    [1370224000000, 0.7645],
                  ],
                },
                {
                  name: "上上周",
                  data: [
                    [1370131200000, 0.7695],
                    [1370217600000, 0.7648],
                    [1370224000000, 0.7645],
                  ],
                },
              ],
            },
            {
              //这是一张图
              name: "售票活动终端趋势图",
              series: [
                {
                  name: "当前周期",
                  data: [
                    [1370131200000, 0.7695],
                    [1370217600000, 0.7648],
                    [1370224000000, 0.7645],
                  ],
                },
                {
                  name: "前一天",
                  data: [
                    [1370131200000, 0.7695],
                    [1370217600000, 0.7648],
                    [1370224000000, 0.7645],
                  ],
                },
                {
                  name: "前一周",
                  data: [
                    [1370131200000, 0.7695],
                    [1370217600000, 0.7648],
                    [1370224000000, 0.7645],
                  ],
                },
                {
                  name: "上上周",
                  data: [
                    [1370131200000, 0.7695],
                    [1370217600000, 0.7648],
                    [1370224000000, 0.7645],
                  ],
                },
              ],
            },
            {
              //这是一张图
              name: "售票请求趋势图",
              series: [
                {
                  name: "当前周期",
                  data: [
                    [1370131200000, 0.7695],
                    [1370217600000, 0.7648],
                    [1370224000000, 0.7645],
                  ],
                },
                {
                  name: "前一天",
                  data: [
                    [1370131200000, 0.7695],
                    [1370217600000, 0.7648],
                    [1370224000000, 0.7645],
                  ],
                },
                {
                  name: "前一周",
                  data: [
                    [1370131200000, 0.7695],
                    [1370217600000, 0.7648],
                    [1370224000000, 0.7645],
                  ],
                },
                {
                  name: "上上周",
                  data: [
                    [1370131200000, 0.7695],
                    [1370217600000, 0.7648],
                    [1370224000000, 0.7645],
                  ],
                },
              ],
            },
          ],
        },
        {
          name: "第二组",
          chartData: [
            {
              //这是一张图
              name: "在线终端趋势图",
              series: [
                {
                  name: "当前周期",
                  data: [
                    [1370131200000, 0.7695],
                    [1370217600000, 0.7648],
                    [1370224000000, 0.7645],
                  ],
                },
                {
                  name: "前一天",
                  data: [
                    [1370131200000, 0.7695],
                    [1370217600000, 0.7648],
                    [1370224000000, 0.7645],
                  ],
                },
                {
                  name: "前一周",
                  data: [
                    [1370131200000, 0.7695],
                    [1370217600000, 0.7648],
                    [1370224000000, 0.7645],
                  ],
                },
                {
                  name: "上上周",
                  data: [
                    [1370131200000, 0.7695],
                    [1370217600000, 0.7648],
                    [1370224000000, 0.7645],
                  ],
                },
              ],
            },
            {
              //这是一张图
              name: "售票活动终端趋势图",
              series: [
                {
                  name: "当前周期",
                  data: [
                    [1370131200000, 0.7695],
                    [1370217600000, 0.7648],
                    [1370224000000, 0.7645],
                  ],
                },
                {
                  name: "前一天",
                  data: [
                    [1370131200000, 0.7695],
                    [1370217600000, 0.7648],
                    [1370224000000, 0.7645],
                  ],
                },
                {
                  name: "前一周",
                  data: [
                    [1370131200000, 0.7695],
                    [1370217600000, 0.7648],
                    [1370224000000, 0.7645],
                  ],
                },
                {
                  name: "上上周",
                  data: [
                    [1370131200000, 0.7695],
                    [1370217600000, 0.7648],
                    [1370224000000, 0.7645],
                  ],
                },
              ],
            },
            {
              //这是一张图
              name: "售票请求趋势图",
              series: [
                {
                  name: "当前周期",
                  data: [
                    [1370131200000, 0.7695],
                    [1370217600000, 0.7648],
                    [1370224000000, 0.7645],
                  ],
                },
                {
                  name: "前一天",
                  data: [
                    [1370131200000, 0.7695],
                    [1370217600000, 0.7648],
                    [1370224000000, 0.7645],
                  ],
                },
                {
                  name: "前一周",
                  data: [
                    [1370131200000, 0.7695],
                    [1370217600000, 0.7648],
                    [1370224000000, 0.7645],
                  ],
                },
                {
                  name: "上上周",
                  data: [
                    [1370131200000, 0.7695],
                    [1370217600000, 0.7648],
                    [1370224000000, 0.7645],
                  ],
                },
              ],
            },
          ],
        },
      ],
    };
  },

  components: { LineChart },

  methods: {},
};
</script>

<style scoped>
.province_chart {
  margin-top: 50px;
  float: left;
}

.title {
  margin-top: 200px;
}
</style>
